<template>
  <div class="mini">
    <!-- 底部迷你播放器 -->
    <transition enter-active-class="slide-in" leave-active-class="slide-out">
      <play-bottom v-show="miniShow" @showPlayer="showPlayer" />
    </transition>
    <!-- 标准播放器 -->
    <transition
      @enter="playEnter"
      @after-enter="afterPlayer"
      @leave="playLeave"
    >
      <player
        v-if="isPlayShow"
        ref="player"
        @showPlayer="showPlayer"
        :speed.sync="speed"
      />
    </transition>
    <audio ref="audio" style="opacity: 0; width: 0; height: 0"></audio>
  </div>
</template>

<script>
const ani = {
  methods: {
    showPlayer() {
      this.isPlayShow = !this.isPlayShow;
    },
    playEnter(el, done) {
      this.$refs.player.startAni(done);
    },
    afterPlayer() {
      this.$refs.player.afterStartAni();
    },
    playLeave(el, done) {
      this.$refs.player.endAni(done);
    },
  },
};
import { mapState, mapGetters } from "vuex";
import PlayBottom from "./child/play-bottom.vue";
import Player from "./child/Player.vue";
export default {
  mixins: [ani],
  components: { PlayBottom, Player },
  data() {
    return {
      isPlayShow: false,
      miniShow: false,
      speed: 1,
    };
  },
  watch: {
    isPlayShow(newVal) {
      this.miniShow = !newVal;
    },
    currentIndex(newVal, oldVal) {
      if (oldVal < 0) {
        this.miniShow = true;
      }
    },
    speed(newVal) {
      this.$refs.audio.playbackRate = newVal;
    },
  },
  computed: {
    ...mapState({
      currentIndex: (state) => state.player.currentIndex,
      playing: (state) => state.player.playing,
      progress: (state) => state.player.progress,
      duration: (state) => state.player.duration,
      isTouch: (state) => state.player.isTouch,
      playMode: (state) => state.player.playMode,
    }),
    ...mapGetters({
      currentSong: "player/currentSong",
    }),
  },
  mounted() {
    let audio = this.$refs.audio;
    // 播放歌曲变化时
    this.$watch('currentSong',async (newVal)=>{
       let { success } = await this.$store.dispatch(
        "player/checkMusic",
        this.currentSong.id
      );
      if (success) {
        audio.src = `https://music.163.com/song/media/outer/url?id=${this.currentSong.id}`;
        audio.playbackRate = this.speed;
        this.$store.dispatch("player/getLyric");
        audio.play();
      } else {
        this.$toast("充钱后即可播放");
        this.$store.commit("player/setCurrentIndex", "next");
      }
    })
    //监听播放状态
    this.$watch("playing", (newVal) => {
      newVal ? audio.play() : audio.pause();
    });
    audio.addEventListener("canplay", () => {
      this.$store.commit("player/setDuration", audio.duration);
    });
    // 实时播放时间监听
    audio.addEventListener("timeupdate", () => {
      if (this.isTouch) return;
      this.$store.commit(
        "player/setProgress",
        audio.currentTime / audio.duration
      );
      this.$store.commit("player/setCurrentTime", audio.currentTime);
    });
    //播放结束
    audio.addEventListener("ended", () => {
      if (this.playMode == 0) {
        this.$store.commit("player/setCurrentIndex", "next");
      } else if (this.playMode == 1) {
        audio.currentTime = 0;
        audio.play();
      } else {
        this.$store.commit("player/getRandomSong");
      }
    });
    // 修改播放时间,通过事件总线触发
    this.bus.$on("setCurrentTime", () => {
      audio.currentTime = this.progress * audio.duration;
    });
    // 切歌
    this.bus.$on("switchPlay", (id) => {
      audio.src = `https://music.163.com/song/media/outer/url?id=${id}`;
      audio.playbackRate = this.speed;
      this.$store.dispatch("player/getLyric");
      audio.play();
    });
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.mini {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background: rgba($color: #000, $alpha: 0.3);
}
// 划入划出
.slide-in {
  animation: slideIn 0.5s;
}
.slide-out {
  animation: slideOut 0.5s;
}
@keyframes slideIn {
  0% {
    transform: translateY(60px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slideOut {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(60px);
  }
}
/* 淡入淡出 */
.fade-in {
  animation: fadeIn 0.3s ease-in;
}
.fade-out {
  animation: fadeOut 0.3s ease-out;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>

<style>
.rotate {
  animation: rotate 16s infinite linear;
}
.rotate.paused {
  animation-play-state: paused;
}
.rotate.play {
  animation-play-state: play;
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>